import { useState, useRef } from 'react';
import './App.css';
function App() {
  console.log('render app');
  const userRef = useRef<HTMLInputElement>(null);
  const [val, setVal] = useState('');

  const handleClick = () => {
    console.log(userRef.current?.value);
    setVal(userRef.current?.value || '')
    userRef.current?.focus();
    console.log('className', userRef.current?.className)
  };

  return (
    <>
      <div className='card'>
        <h1>useRef 使用方法</h1>
        <input type="text" ref={userRef} className='red' />
        <button onClick={handleClick}>点击获取</button>
        <p>{val}</p>
      </div>
    </>
  );
}

export default App;